<!-- 添加修改地址 -->
<template>
	<view class="address-wrap">
		<view class="address-box u-flex u-row-left u-col-center u-flex-nowrap">
			<view class="price-item u-flex u-flex-col u-row-center u-col-center" :class="chooseId==index?'active':''" v-for="(item,index) in vipData" @click="choosePrice(item,index)">
				<view class="name u-p-b-10">{{ item.name }}</view>
				<view class="price-group u-flex u-row-center u-col-bottom">
					<view class="price-unit">¥</view>
					<view class="price_num">{{item.price}}</view>
				</view>
			</view>
		</view>
		
		<!-- 功能按钮 -->
		<view class="foot_box u-p-30 u-flex u-row-around">
			<button class=" u-m-20 u-reset-button save-btn u-flex-1" @tap="submit">提交</button>
		</view>
		<view class="u-flex u-flex-col u-row-center u-col-center huiyuan-fenge u-p-t-50">
			<view class="u-flex u-row-center u-col-center">
				<view class="dash u-m-r-30"></view>
				<view class="quanyi">VIP专享权益</view>
				<view class="dash u-m-l-30"></view>
			</view>
			<view class="u-m-t-40 u-flex u-row-center u-col-center huiyuan-content u-p-t-10">
				<view class="u-flex u-flex-col u-row-center u-col-center u-m-r-80">
					<image class="img" :src="$IMG_URL + '/user/huiyuan/fengche.png'"></image>
					<view class="img-title">实时动态</view>
				</view>
				<view class="u-flex u-flex-col u-row-center u-col-center">
					<image class="img" :src="$IMG_URL + '/user/huiyuan/xin.png'"></image>
					<view class="img-title">专享服务</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { MAP_KEY } from '@/env.js';
import Auth from '@/shopro/permission/index.js';
export default {
	components: {},
	data() {
		return {
			chooseId:0,
			showSelect: false, //省市区
			addressAreaList: [],
			addressId: 0, //收货地址ID
			labelStyle: {
				'font-size': '28rpx',
				'font-weight': '600',
				color: '#595959'
			},
			model: {
				id: 0,
				consignee: '',
				phone: '',
				area_text: '',
				address: ''
			},
			vipData:[]
		};
	},
	computed: {},
	onReady() {
	},
	onLoad() {
		this.getViplist();
	},
	methods: {
		getViplist() {
			let formData = {
				token: uni.getStorageSync('token')
			};
			this.$new_http('newuser.viplist',formData).then(res => {
				let allVipData = []
				 res.data.forEach((item)=>{
					if(item.viplist){
						item.viplist.forEach(items=>{
							allVipData.push(items)
						})
					}
				})
				this.vipData = allVipData;
				
			});
		},
		// 选择会员类型
		choosePrice(item,index) {
			this.chooseId = index;
			this.chooseItem = item;
		},
		
		// 提交
		submit() {
			if(this.chooseItem){
				uni.setStorageSync('order', this.chooseItem);
			}else{
				uni.setStorageSync('order', this.vipData[0]);
			}
			this.jump('/pages/index/project_list/qrorder');
		},
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		// 地址信息
		getAddressInfo() {
			const that = this;
			this.$http('address.info', {
				id: that.$Route.query.id
			}).then(res => {
				if (res.code === 1) {
					let addressData = res.data;
					that.addressId = addressData.id;
					that.model.area_text = `${addressData.province_name}-${addressData.city_name}-${addressData.area_name}`;
					that.model.is_default = addressData.is_default === '1' ? true : false;
					that.model.address = addressData.address;
					that.model.phone = addressData.phone;
					that.model.consignee = addressData.consignee;
				}
			});
		}
	}
};
</script>

<style lang="scss">
page{
	background: #fff;
}
.address-box{
	overflow-x: scroll;
	padding: 80rpx 30rpx 40rpx;
	.price-item{
		width: 200rpx;
		height: 240rpx;
		flex:0 0 200rpx;
		background:#F5F5F5;
		padding: 40rpx 10rpx;
		border-radius:20rpx;
		margin-right: 20rpx;
		&:last-child{
			margin-right: 0;
		}
		.name{
			color: #333333;
		}
		.price-group{
			color: #864E12;
			font-size: 40rpx;
			.price-unit{
				font-size: 36rpx;
			}
		}
		&.active{
			background: #FFF2DE;
			border: 2rpx solid #FEAB69;
			border-radius: 20rpx;
			.price-group{
				color: #FC4E2F;
			}
		}
	}
}
.huiyuan-fenge{
	.dash{
		width: 160rpx;
		height: 0rpx;
		border: 2rpx dashed #DB9365;
	}
	.quanyi{
		font-size: 34rpx;
		color:#DB9365;
	}
}
.huiyuan-content{
	.img{
		width: 60rpx;
		height: 60rpx;
	}
	.img-title{
		margin-top: 20rpx;
	}
}
// 底部按钮
.foot_box {
	.save-btn {
		line-height: 70rpx;
		background:linear-gradient( 90deg, #FBDCA2 0%, #F6B948 100%);
		border: 1rpx solid rgba(238, 238, 238, 1);
		border-radius: 40rpx;
		padding: 10rpx 0;
		color: rgba(#864E12, 0.9);
	}
}
</style>
